import React, { Component } from 'react';
import { Breadcrumb, Avatar, Menu, Dropdown, Icon, Row, Col } from 'antd';
import { Link, Route, Switch, Redirect } from 'react-router-dom';

const windowWidth = window.innerWidth;

const styles = {
  head: {
    height: 50,
    width: '100%',
    position: 'fixed',
    top: 0,
    background: '#1da3fc',
    zIndex: 999,
    overflow: 'hidden',
  },
  span: {
    color: '#fff',
    fontSize: 33,
    marginLeft: 10,
  },
  link: {
    height: 50,
    paddingTop: 14,
    paddingLeft: 30,
  },
  avatar: {
    top: 7,
  },
  dropdown: {
    color: '#fff',
  },
  dropdownDiv: {
    height: 50,
    paddingTop: 14,
  }
}

const menu = (
  <Menu>
    <Menu.Item>
      <Link to='' >我的设置</Link>
    </Menu.Item>
    <Menu.Item>
      <Link to='' >退出登陆</Link>
    </Menu.Item>
  </Menu>
);

class Head extends Component {
  render() {
    return(
      <Row>
      <div style={styles.head}>
        <Col xs={7} md={5} lg={5}>
          <span style={styles.span}>知识库</span>
        </Col>
        <Col xs={0} md={6} lg={6} push="10">
          <div style={styles.link}>
            <Breadcrumb>
              <Breadcrumb.Item><Link to="/"><span style={{fontSize: 13, color: '#fff'}}>主页</span></Link></Breadcrumb.Item>
              <Breadcrumb.Item><Link to="/mine/:ever"><span style={{fontSize: 13, color: '#fff'}}>我的知识库</span></Link></Breadcrumb.Item>
              <Breadcrumb.Item><Link to="/mine"><span style={{fontSize: 13, color: '#fff'}}>分享记录</span></Link></Breadcrumb.Item>
            </Breadcrumb>
          </div>
        </Col>
        <Col xs={0} md={4} lg={4} push="10">
          <Avatar style={styles.avatar} src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        </Col>
        <Col xs={5} md={7} lg={3} push="7">
          <div style={styles.dropdownDiv}>
            <Dropdown overlay={menu} >
              <a className="ant-dropdown-link" href="" style={styles.dropdown}>
              用户选项<Icon type="down" />
              </a>
            </Dropdown>
          </div>
        </Col>
      </div>
      </Row>
    )
  }
}


export default Head;
